import type { Router } from 'vue-router'
import { inject } from '@/utils/aop'

export enum DirectionType {
  // 进入动画
  In = 'in',
  // 退出动画
  Out = 'out',
  /** 不应用动画，用于处理IOS侧滑冲突 */
  None = '',
}

// 路由动画
export const routeTransition = (router: Router) => {
  /** 默认认为是IOS的侧滑返回，通过监听router方法进行改变 */
  let isIosJump = true

  // 默认不应用动效
  let direction = DirectionType.None

  /** 处理路由跳转动画，push、replace、go(正值｜0)应用In动画，其他情况应用Out动画 */
  router.replace = inject('before', router.replace, () => {
    // 只要是调用了路由调转方法就认定不是IOS默认侧滑返回
    isIosJump = false

    // 替换路由时，应用 `In动画(左 -> 右)`
    direction = DirectionType.In
  })

  router.push = inject('before', router.push, () => {
    isIosJump = false
    // 添加路由时，应用 `In动画(左 -> 右)`
    direction = DirectionType.In
  })

  router.go = inject('before', router.go, (delta) => {
    isIosJump = false

    // 注意：delta=0时，也可单独判断，设置direction 为 DirectionType.None，不应用动画，因为相当于当前页面刷新
    if (delta >= 0) {
      // 路由前进时，应用 `In动画(左 -> 右)`
      direction = DirectionType.In
    } else {
      // 路由回退时，应用 `Out动画(右 -> 左)`
      direction = DirectionType.Out
    }
  })

  router.back = inject('before', router.back, () => {
    isIosJump = false

    // 路由回退时，应用 `Out动画(右 -> 左)`
    direction = DirectionType.Out
  })

  router.beforeEach(function (to, from, next) {
    // 如果是IOS侧滑则不应用侧滑动效
    if (isIosJump) {
      direction = DirectionType.None
    }
    // 记录动画滑动方向存放在，目标页面route.meta中
    to.meta.direction = direction

    next()
  })

  router.afterEach(() => {
    isIosJump = true
  })
}
